<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<ul class="list">
    <!-- <li>姓名：小错</li>
    <li>年龄：20</li>
    <li>性别：男</li> -->
</ul>

<script>
// 单引号或双引号字符串：
// 1.内部不能回车换行
// 2.字符串和变量拼接特麻烦

// 模板字符串
// 模板字符串使用反引号表示 ``
// 模板字符串内部可以使用回车换行
// 可以使用 ${变量/表达式} 插入变量

let name = '红浪漫';
console.log( '大家好，我叫：'+name+'晶哥哥' );// '大家好，我叫：红浪漫晶哥哥'
console.log( `大家好，我叫：${name}晶哥哥` );// '大家好，我叫：红浪漫晶哥哥'

// 用户数据
let data = {
    name: '红浪漫',
    age: 21,
    sex: '女'
}

let list = document.querySelector('.list');

// list.innerHTML = '<li>姓名：'+data.name+'</li><li>年龄：'+data.age+'</li><li>性别：'+data.sex+'</li>';

// list.innerHTML = '<li>姓名：'+data.name+'</li>'+
//                  '<li>年龄：'+data.age+'</li>'+
//                  '<li>性别：'+data.sex+'</li>';

list.innerHTML = `<li>姓名：${data.name}</li>
                <li>年龄：${data.age}</li>
                <li>性别：${data.sex}</li>`;


</script>
</body>
</html>